
<template>
  <div class='duration-chart-container'
       ref='container'
       element-loading-text='正在导出中，可能需要20-30分钟，请耐心等待'
       v-loading.fullscreen.lock='fullscreenLoading'
  >
    <div class='search-box' :class="[isFullScreen() ? 'full-box' : '']">
      <div>
        <div v-if='!trgnodes'>
        <span>业务单元</span>
        <Select v-model='searchData.trgNode' filterable clearable placeholder='请选择'>
          <Option
            @click.native='codeChange(item)'
            v-for='item in bussinessUnit'
            :key='item.trgNode'
            :label='item.trgNode'
            :value='item.trgNode'>
          </Option>
        </Select>
      </div>
      <div>
        <span>举措大类</span>
        <Select v-model='searchData.stype' filterable clearable placeholder='请选择'>
          <Option
            @click.native='stypeChange(item)'
            v-for='item in categoryInitiatives'
            :key='item.vsiValue'
            :label='item.vsiValue'
            :value='item.vsiValue'>
          </Option>
        </Select>
      </div>
      <div>
        <span>举措细类</span>
        <Select v-model='searchData.mtype' filterable clearable placeholder='请选择'>
          <Option
            v-for='item in detailsInitiatives'
            :key='item.vsiValue'
            :label='item.vsiValue'
            :value='item.vsiValue'>
          </Option>
        </Select>
      </div>
      <div>
        <span>当前状态</span>
        <Select v-model='searchData.currentStatus' filterable clearable placeholder='请选择'>
          <Option
            v-for='item in statusList'
            :key='item'
            :label='item'
            :value='item'>
          </Option>
        </Select>
      </div>
      </div>
      <div>
        <RPButton optType='create' type='info' @click='clickHandle' text='查询' />
        <RPButton class="export-button" optType='create' type='info' :loading='exportButtonLoading' @click='downloadImg' text='导出' />
      </div>
    </div>
    <!-- <div class="export-box" :class="[isFullScreen() ? 'full-box' : '']">
      <RPButton  optType='create' type='info' :loading='exportButtonLoading' class='duration-chart-downloadPDF-btn'
          @click='downloadImg' text='导出' />
    </div> -->
    <div id='durationChart' ref='durationChart' class='tableBox' :style='{height: containerHeight + "px"}'>
      <!-- <el-button @click="getNow">默认按钮</el-button> -->
      <div id='remove' class='buttom' @mouseenter='showFullBtn = true' @mouseleave='showFullBtn = false' @click='fullFun' v-if='showFullBtn'></div>
      <!--    虚拟滚动-->
      <u-table
        :header-cell-style='tableHeaderColor'
        :cell-class-name='addClass'
        ref='sortTable'
        use-virtual
        id='durationChartTable'
        v-if='!trgnodes.length && !exportSwitch'
        :row-height='25'
        :max-height='sortTableHeight'
        :span-method="objectSpanMethod"
      >
        <u-table-column v-if='!trgnodes' class-name='tablehead' show-overflow-tooltip fixed align='center' width='80'>
          <u-table-column class-name='tablehead text-align-center' label='业务单元' fixed prop='trgNode' align='center' width='80'>
          </u-table-column>
        </u-table-column>
        <u-table-column class-name='tablehead' show-overflow-tooltip type='index' fixed align='center' width='45'>
          <u-table-column class-name='tablehead text-align-center' label='序号' fixed type='index' align='center'
                          width='45'></u-table-column>
        </u-table-column>

        <u-table-column class-name='tablehead' fixed prop='highTask' align='left' width='140' show-overflow-tooltip>
          <u-table-column class-name='tablehead text-align-left' label-class-name="text-align-center" label='重点任务' fixed prop='highTask' align='left' width='140'
                          show-overflow-tooltip>
            <template slot-scope='scope'>
              <span>{{ scope.row.highTask }}</span>
            </template>
          </u-table-column>
        </u-table-column>
        <u-table-column class-name='tablehead' fixed prop='taskMod' align='center' width='140' show-overflow-tooltip>
          <u-table-column class-name='tablehead text-align-left' label-class-name="text-align-center" label='落实举措' fixed prop='taskMod' align='center' width='140'
                          show-overflow-tooltip>
            <template slot-scope='scope'>
              <span>{{ scope.row.taskMod }}</span>
            </template>
          </u-table-column>
        </u-table-column>
        <u-table-column class-name='tablehead' fixed prop='startDate' align='center' width='80'>
          <u-table-column class-name='tablehead text-align-center' label='计划开始时间' fixed prop='startDate' align='center' width='80'>
            <template slot-scope='scope'>
              <span>{{ scope.row.startDate }}</span>
            </template>
          </u-table-column>
        </u-table-column>
        <u-table-column class-name='tablehead' fixed prop='endDate' align='center' width='80'>
          <u-table-column class-name='tablehead text-align-center' label='计划完成时间' fixed prop='endDate' align='center' width='80'>
            <template slot-scope='scope'>
              <span>{{ scope.row.endDate }}</span>
            </template>
          </u-table-column>
        </u-table-column>
        <u-table-column class-name='tablehead' fixed prop='currentStatus' align='center' width='80'>
          <u-table-column class-name='tablehead text-align-center' label='当前状态' fixed prop='currentStatus' align='center' width='80'>
            <template slot-scope='scope'>
              <span>{{ scope.row.currentStatus }}</span>
            </template>
          </u-table-column>
        </u-table-column>
        <u-table-column
          v-for='(item, index) in years'
          prop='years'
          align='center'
          :key='index'
          class-name="u-tablehead"
          :label="item.year + '年'"
        >
          <u-table-column
            v-for='(it, index1) in item.month'
            :label="it + '月'"
            style='padding: 0; margin: 0;'
            align='center'
            class-name="u-tablehead"
            :key='index1'
            :prop="item.year + '年' + it + '月'"
          >
            <template slot-scope='scope'>
              <div v-if='getSection(item.year,it,scope.row.startDate,scope.row.endDate)' class='planClass'></div>
              <!-- 正常进行 -->
              <div
                v-if="getCurrent(item.year,it,scope.row.startDate,scope.row.currentStatus,'正常进行', scope.row.progressPercentage)"
                :style="{width: getProgressBarLength(scope.row) + 'px'}"
                class='normalClass'>
                <span v-bind:class="{ 'small-progress': getProgressBarLength(scope.row) < 12 }">{{ scope.row.progressPercentage + '%' }}</span>
              </div>
              <!-- 延迟 -->
              <div
                v-if="getCurrent(item.year,it,scope.row.startDate,scope.row.currentStatus,'延期进行', scope.row.progressPercentage)"
                :style="{width: getProgressBarLength(scope.row) + 'px'}"
                class='postponeClass'>
                <span v-bind:class="{ 'small-progress': getProgressBarLength(scope.row) < 12 }">{{ scope.row.progressPercentage + '%' }}</span>
              </div>
              <!-- 超前 -->
              <div
                v-if="getCurrent(item.year,it,scope.row.startDate,scope.row.currentStatus,'超额推进', scope.row.progressPercentage)"
                :style="{width: getProgressBarLength(scope.row) + 'px'}"
                class='exceedClass'>
                <span v-bind:class="{ 'small-progress': getProgressBarLength(scope.row) < 12 }">{{ scope.row.progressPercentage + '%' }}</span>
              </div>
              <!-- 已完成 -->
              <div
                v-if="getOver(item.year,it,scope.row.startDate,scope.row.currentStatus,'已完成', scope.row.progressPercentage)"
                :style="{width: getProgressBarLength(scope.row) + 'px'}"
                class='surpassClass'>
                <span v-bind:class="{ 'small-progress': getProgressBarLength(scope.row) < 12 }">{{ scope.row.progressPercentage + '%' }}</span>
              </div>
              <!-- 未启动 -->
              <div v-if="getNotStart(item.year,it,scope.row.startDate,scope.row.currentStatus,'未启动', scope.row.progressPercentage)" :style="{width:'0px'}" class="notStartClass">
                <span class="small-progress">{{ scope.row.progressPercentage + '%' }}</span>
              </div>
              <!-- 非计划周期内的已完成 -->
              <!-- <div v-if="getBeforeOver(item,it,scope.row.startDate,scope.row.endDate,scope.row.currentStatus,'已完成', scope.row.progressPercentage)" :style="{width: getProgressBarLength(scope.row) + 'px'}" class="surpassClass"><span>{{scope.row.progressPercentage + '%'}}</span></div> -->
            </template>
          </u-table-column>
        </u-table-column>
      </u-table>
      <div v-if='!tableData.length' style='text-align: center;'>暂无数据</div>
    </div>
  </div>
</template>

<script>
import coverApi from '../../api/cover'
import { categoryInitiatives } from '@/api/planDataConfig.js'
import { GANTT_TYPE_SHOW_BUSSINESS_UNIT } from './const.js'
import gantt from '@/mixin/gantt'
let alltableData = [];
export default {
  name: 'allDurationChart',
  components: {},
  mixins: [gantt],
  props: {
    trgnodes: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    isAll: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      years: [],
      tableData: [],
      normalData: [],
      sortTableHeight: '450',
      containerHeight: '450',
      showFullBtn: true,
      categoryInitiatives: categoryInitiatives,
      detailsInitiatives: [],
      bussinessUnit: [],
      statusList: [
        '未启动',
        '正常进行',
        '超额推进',
        '延期进行',
        '已完成',
        '--'
      ],
      searchData: {
        stype: null,
        mtype: null,
        currentStatus: null,
        trgNode: null
      },
      exportSwitch: false,
      fullscreenLoading: false,
      spanArr: [],
      requestMethod: null
    }
  },
  created: async function() {
    this.searchData.trgNode = this.trgnodes
    coverApi.postRptPlantaskFindList(this.searchData).then(res => {
       // 总工期图
          alltableData = res.data.data
          this.$nextTick(() => {
          // this.$refs.sortTable.reloadData(alltableData)
          if(alltableData.length) {
            this.tableData = [{}]
          } else {
            this.tableData = []
          }
          })
      this.init()
    })
  },
  mounted() {
    console.log('sss', this.isAll)
    this.getContainerHeight()
    this.getTableHeight()
    this.addListen()
  },
  watch: {
    'searchData.stype': {
      handler(val) {
        if (!val) {
          this.detailsInitiatives = []
          this.searchData.mtype = ''
        }
      }
    }
  },
  methods: {
    init() {
      alltableData.forEach(e => {
        e.startDate = e.startDate ? e.startDate.slice(0, 7) : e.startDate
        e.endDate = e.endDate ? e.endDate.slice(0, 7) : e.endDate
      })
      this.getUnitList()
      this.getMaxAndMin()
    },
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].name === data[i - 1].name) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   if (row.first) {
      //     console.log(row.trgNode)
      //     console.log('in row.first')
      //     return {
      //       rowspan: row.count,
      //       colspan: 1
      //     }
      //   } else {
      //     console.log(row.trgNode)
      //     console.log('in else')
      //     return {
      //       rowspan: 0,
      //       colspan: 0
      //     }
      //   }
      // }
    },
    addListen() {
      const ele = this.$refs.sortTable.$el
      ele.addEventListener('mouseenter', (e) => {
        if (!this.isFullScreen()) {
          this.showFullBtn = true
        } else {
          this.showFullBtn = false
        }
      })
      ele.addEventListener('mouseleave', (e) => {
        this.showFullBtn = false
      })
    },
    getUnitList() {
      coverApi.getRptReportTrgnodePList({ reportName: this.typeName }).then(res => {
        this.bussinessUnit = res.data.data
      })
    },
    clickHandle() {
      coverApi.postRptPlantaskFindList(this.searchData).then(res => {
                  // 总工期图
          alltableData = res.data.data
          this.$refs.sortTable.reloadData(alltableData)
          if(alltableData.length) {
            this.tableData = [{}]
          } else {
            this.tableData = []
          }
          this.init()
      })
    },
    codeChange(list) {
      this.searchData.trgNode = list.trgNode
    },
    stypeChange(list) {
      this.detailsInitiatives = list.children
      this.searchData.mtype = ''
    },
    downloadImg() {
      this.exportGantt({
        ganttType: GANTT_TYPE_SHOW_BUSSINESS_UNIT,
        ...this.searchData
      })
    },
    getSection(y, m, startDate, endDate) {
      if (m < 10) {
        m = '0' + m
      }
      const data = y + '-' + m
      if (startDate <= data && endDate >= data) {
        return true
      }
    },
    // 获取当前状态
    getCurrent(item, it, startDate, currentStatus,current,progressPercentage) {
      const data = (item + '-' + (it < 10 ? '0' + it : it))
      if(data == startDate && currentStatus == current && progressPercentage !== '100' && progressPercentage !== null) {
        return true
      }
    },
    // 已完成100% 的计划未开始状态
    getOver(item, it, startDate, currentStatus,current, progressPercentage) {
      const data = (item + '-' + (it < 10 ? '0' + it : it))
      if(data == startDate && currentStatus == current && progressPercentage == '100' && progressPercentage !== null) {
        return true
      }
    },
    // 未启动
    getNotStart(item, it, startDate, currentStatus,current, progressPercentage) {
      const data = (item + '-' + (it < 10 ? '0' + it : it))
      if(data == startDate && currentStatus == current && (!progressPercentage || progressPercentage == '0')) {
        return true
      }
    },
    getBeforeOver(item, it, startDate, endDate, currentStatus,current, progressPercentage) {
      const data = (item + '-' + (it < 10 ? '0' + it : it))
      if(data == startDate && currentStatus == current && progressPercentage == '100' && endDate <= this.getNow()) {
        return true
      }
    },
    // 月份差
    getMonths(startDate, endDate) {
      startDate = startDate.split('-');
      // 开始月数
      startDate = parseInt(startDate[0]) * 12 + parseInt(startDate[1]);
      endDate = endDate.split('-');
      // 结束月数
      endDate = parseInt(endDate[0]) * 12 + parseInt(endDate[1]);
      const times = Math.abs(startDate - endDate);
      return times + 1
    },
    // 计算进度条长度
    getProgressBarLength(row) {
      let { startDate, endDate, progressPercentage } = row
      let result = (80*this.getMonths(startDate, endDate))*(Number(progressPercentage)/100)
      return result = result > 12 ? result : 6
    },
    getYearBetween(start, end){
      let result = [];
      let min = new Date(start).getFullYear();
      let max = new Date(end).getFullYear();
      let diff = max - min
      let index = 0
      while (min <= max) {
        const obj = {}
        if (index === 0) {
          const arr = []
          const month = new Date(start).getMonth() + 1
          for(let index = month; index < 13; index++) {
            arr.push(index)
          }
          obj.month = arr
        } else if (index === diff) {
          obj.month = new Date(end).getMonth() + 1
        } else {
          obj.month = 12
        }
        obj.year = min + ''
        index ++;
        result.push(obj);
        min = (Number(min) + 1) + ''
      }
      this.years = result
      this.$refs.sortTable.reloadData(alltableData)
      console.log('years', this.years)
    },
    // 获取最大日期和最小日期
    getMaxAndMin() {
      // let arr = alltableData
      // arr = arr.filter(item => item.startDate !== null || item.endDate !== null);
      // const min = new Date(Math.min(...arr.map(item => new Date(item.startDate))));
      // const max = new Date(Math.max(...arr.map(item => new Date(item.endDate))));
      // const minDate = min.getFullYear() + '-' + ((min.getMonth() + 1) < 10 ? '0' + (min.getMonth() + 1) : min.getMonth() + 1)
      // const maxDate = max.getFullYear() + '-' + ((max.getMonth() + 1) < 10 ? '0' + (max.getMonth() + 1) : max.getMonth() + 1)
      // this.getYearBetween(minDate, maxDate)
      this.getYearBetween('2021-01', '2025-12')
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      let data = new Date()
      const y = data.getFullYear()
      const m = data.getMonth()
      let dataNow = ''
       if(m == 11) {
        dataNow = (y + 1) + '年' + (1) + '月'
      } else {
        dataNow = y + '年' + (m + 2) + '月'
      }
      if (column.property == dataNow) {
        return 'progressbar'
      }
    },
    getNow() {
      let data = new Date()
      const y = data.getFullYear()
      const m = data.getMonth() + 1
      const dataNow = (y + '-') + ((m < 10) ? '0' + m : m)
      return dataNow
    },
    getContainerHeight(){
      this.$nextTick(function () {
        if(this.$refs.container){
          this.containerHeight = window.innerHeight - this.$refs.container.offsetTop - 350;
        }

        // 监听窗口大小变化
        let self = this;
        window.onresize = function() {
          if(self.$refs.container) {
            self.containerHeight = window.innerHeight - self.$refs.container.offsetTop - 350
          }
          console.log('ssss', self.isFullScreen())
          if (!self.isFullScreen()) {
            self.showFullBtn = true
          } else {
            self.showFullBtn = false
            self.containerHeight = window.innerHeight - self.$refs.container.offsetTop - 80
          }
        }
        console.log('container height', self.containerHeight)
      });
    },
    getTableHeight() {
      this.$nextTick(function () {
        let exceptHeight = 480;
        // this.$refs.table.$el.offsetTop：表格距离浏览器的高度
        if(this.$refs.sortTable.$el){
          this.sortTableHeight = window.innerHeight - this.$refs.sortTable.$el.offsetTop - exceptHeight + 100;
        }

        // 监听窗口大小变化
        let self = this;
        window.onresize = function() {
          if(self.$refs.sortTable.$el){
            self.sortTableHeight = window.innerHeight - self.$refs.sortTable.$el.offsetTop - exceptHeight + 100;
          }
          if (!self.isFullScreen()) {
          } else {
            self.sortTableHeight = window.innerHeight - self.$refs.sortTable.$el.offsetTop - 150
          }
          console.log('table height', self.sortTableHeight)
        }
      });
    },
    // 修改表头颜色
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return { background: 'rgba(218, 224, 237, 1)' }
      } else if (rowIndex === 1) {
        return { background: 'rgba(239, 244, 255, 1)' }
      }
    },
    isFullScreen() {
      return document.fullscreenElement || document.msFullcreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false
    },
    fullFun() {
      this.showFullBtn = false
      const fullElement = this.$refs.container
      let requestMethod = fullElement.requestFullScreen || fullElement.webkitRequestFullScreen || fullElement.mozRequestFullScreen
      if (requestMethod) {
        requestMethod.call(fullElement)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.planClass {
  // width: 81px;
  height: 24px;
  background-color: #EBEEF7;
}

.duration-chart-container {
  background: #FFF;
  /deep/ .ivu-btn-warning {
    background-color: #ff6f4b;
    border-color: #ff6f4b
  }

  .search-box {
      display: flex;
      justify-content: space-between;
      .export-button {
        margin-left: 10px;
      }
    > div{
      display: flex;
      flex-wrap: wrap;
        > div {
        display: flex;
        align-items: center;
        margin-right: 8px;
        margin-bottom: 8px;
        span {
          margin-right: 8px;
          display: block;
          width: 96px;
        }
      }
    }
  }
    .search-box.full-box{
    padding: 20px 20px 0 20px;
  }
    .export-box.full-box{
    padding: 0px 0px 0 20px;
  }
}
.export-box{
  margin-bottom:10px
}
#durationChart {
  position: relative;
  #remove {
    display: block;
    position: absolute;
    background: url(../../asset/images/btn.svg);
    right: 30px;
    top: 140px;
    width: 75px;
    height: 75px;
    z-index: 99999;
  }
}

/deep/.el-table__fixed-right::before, /deep/.el-table__fixed::before{
  background: none !important;
}
/deep/.el-table .cell {
  padding-right: 0;
  padding-left: 0;
}
/deep/.el-table td, .el-table th {
  padding: 0px 0;
}
/deep/ .plTableBox thead tr:first-child th:nth-child(2) .cell{
  color: transparent !important;
}
/deep/.el-table thead.is-group th.el-table__cell {
  display: table-cell;
}
/deep/.el-table__fixed {
  // width: 780px !important;
  z-index: 99;
  height: calc(100% - 14px) !important;
}
// /deep/.el-table .cell{
//   text-align: center;
// }
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell {
  display: table-cell;
  border: none;
}
/deep/.el-table thead.is-group th.el-table__cell {
  padding: 0;
  background-color: #ffffff;
  border-top: 1px solid rgb(0,0,0);
  border-right: 1px solid rgb(0,0,0);
  border-bottom: 1px solid rgb(0,0,0);
  border-left: 1px solid rgb(0,0,0);
}
/deep/.el-table th.el-table__cell>.cell {
  font-size: 12px;
  font-family: SimSun;
  color: #666;
}
/deep/.el-table .cell {
  font-size: 12px;
  color: #000000;
  font-family: SimSun;
}
/deep/.el-table td.el-table__cell div {
  height: 21px;
}
/dee/table tr td:first-child, /deep/table tr th:first-child{
  border-left: 1px solid #666666 !important;
}
/deep/.el-table--border th.el-table__cell.gutter:last-of-type {
  opacity: 0;
}
/deep/.el-table th.el-table__cell > .cell {
  padding: 0 !important;
}
.normalClass {
  position: absolute;
  z-index: 9;
  margin-top: -24px;
  height: 24px;
  background-color: #3CDBC4;
  color: #fff;
  text-align: right;
  padding-right: 5px;
  .small-progress {
    margin-left: 8px;
    color: #606266;
    background: #EBEEF7;
  }
}
.postponeClass {
  position: absolute;
  z-index: 9;
  margin-top: -24px;
  height: 24px;
  background-color: #7B89FF;
  color: #fff;
  text-align: right;
  padding-right: 5px;
  .small-progress {
    margin-left: 8px;
    color: #606266;
    background: #EBEEF7;
  }
}
.exceedClass {
  position: absolute;
  z-index: 9;
  margin-top: -24px;
  height: 24px;
  background-color: #4391FA;
  color: #fff;
  text-align: right;
  padding-right: 5px;
  .small-progress {
    margin-left: 8px;
    color: #606266;
    background: #EBEEF7;
  }
}
.surpassClass {
  position: absolute;
  z-index: 9;
  margin-top: -24px;
  height: 24px;
  background-color: #3CDBC4;
  color: #fff;
  text-align: right;
  padding-right: 5px;
  .small-progress {
    margin-left: 8px;
    color: #606266;
    background: #EBEEF7;
  }
}
.notStartClass {
  position: absolute;
  z-index: 9;
  margin-top: -21px;
  height: 21px;
  background-color: #EBEEF7;
  color: #fff;
  text-align: right;
  padding-right: 5px;
  .small-progress {
    margin-left: 8px;
    color: #606266;
    background: #EBEEF7;
  }
}
.duration-chart-container {
  position: relative;
}
.duration-chart-downloadPDF-btn {
  // position: absolute;
  // top: 0px;
  // right: 0px;
  // z-index: 99999;
}
// /deep/.ivu-btn.ivu-btn-loading {
//    position: absolute !important;
// }
/deep/.is-hidden{
  display: revert !important;
}
</style>
<style lang="less">
//.el-table th{
//  display: table-cell !important;
//}
//.el-table colgroup{
//  display: table-cell !important;
//}
.smallprogressPercentage {
    display: block;
    width: 12px;
    height: 24px;
}
.plTableBox .tablehead {
  border-collapse: collapse;
  border: 1px solid #666666 !important;
  border-left: none !important;
}
.plTableBox .text-align-center {
  text-align: center;
}
.plTableBox .text-align-left {
  text-align: left;
}
.tableBox .text-align-center {
  text-align: center;
}
.tableBox .text-align-left {
  text-align: left;
}
.tablehead{
  border: 1px solid #666666 !important;
}
.plTableBox .u-tablehead {
  border-collapse: collapse;
  border-right: 1px solid #EBEEF7 !important; //transparent
  border-left: none !important;
}
/*.tablehead:first-child{
  border-left: 1px solid #666666;
}*/
// .progressbar::before{
//     position: absolute;
//     top: -188px;
//     transform: translatey(-40%);
//     left: -8px;
//     content: '';
//     width: 16px;
//     height: 7px;
//     background-color: orange;
//     height: 100%;
//     z-index: 99;
// }
.progressbar{
  position: relative;
}
.progressbar::after {
    position: absolute;
    top: 40%;
    transform: translatey(-40%); /*Y轴方向偏移微调*/
    left: -2px;
    content: '';
    width: 4px;
    background-color: #EFC459;
    height: 100%;
    z-index: 99;
}
</style>
